Amazon CognitoユーザープールでGoogle認証を連携する

意外とAmazon CognitoユーザープールのGoogle認証連携に関する情報がなかったため、手順をまとめました。

下記のYouTube動画を参考にしつつ実施しています。

How To Add Google Social Sign On To Amazon Cognito | Step by Step Tutorial - YouTube

Cognitoユーザープール作成

Cognito側の大まかな設定の流れは以下の通りです。

1. ユーザープールを作成する
2. ユーザープールにアプリクライアントを追加する
3. ユーザープールにドメイン名を付与する
4. アプリクライアントの設定で各種URLやOAuth 2.0の設定を行う

まずは、Cognitoのユーザープールを作成しておきます。プール名以外、全てデフォルトのまま作成してOKです。

次に、作成したユーザープールにアプリクライアントを追加します。

アプリクライアント名だけ入力し、あとは全てデフォルトでOKです。

続いて、ユーザープールにドメイン名を付与します。独自のドメインを追加したい場合は、ドメインの使用をクリックして設定を進めていってください。

最後にアプリクライアントの設定を行います。有効なIDプロバイダでCognito User Poolにチェックマークを入れ、コールバックURLをhttps://www.example.com/cb、サインアウトURLをhttps://www.example.com/signout、OAuth 2.0でImplicit grantのみチェックマークを入れます。OAuth スコープはお好みでどうぞ。

変更の保存をクリックし、Hosted UIで認証が機能しているか確認してみます。

サインインのUIが表示されました。ひとまずユーザープール単体では機能してそうですね。

この状態でCognito側の設定は一旦ペンディングしておきます。続いて、Google側の設定を実施していきます。

Google認証設定

Google認証側の設定の流れは以下の通りです。

1. Google Cloudのコンソールにログインする
2. OAuth consent screenで、OAuthの設定を行う
3. Cognito用のCredentialsを発行する

ひとまず最初に訪れるべきであろうAWSの公式ドキュメントより、developer account with Googleをクリックします。

そして飛ばさせるのがGoogle Identity Platformのページです。アカウント作成みたいなリンクはなく、誘導ルートが変わってます。2021年10月29日現在、公式ドキュメントの手順に従うと迷子になるのでご注意を。

今回の用途では、「摩擦のないサインインとサインアップ」のWebをクリックします。

Sign In With GoogleのGoogle Identity Servicesの説明画面に飛びます。ページ下部の始めましょうをクリックしてください。

Sign In With Googleのドキュメントに飛びました。実は以前までのGoogle Sign-In JavaScript Platform Library for webは2021年8月に廃止され、このSign In With Googleに変わったようですね。

Google Developers Blog: Discontinuing Google Sign-In JavaScript Platform Library for web

ちなみにAWSドキュメントの方のSign inをクリックすると、廃止されたドキュメントのページに飛びます。

閑話休題、Sign In With Googleのドキュメントに戻ります。ここから日本語訳が変なので英語に切り替えました。左タブからSetupを選択し、Google APIs consoleを開きます。

Googleアカウントにログインしていない場合は、認証画面からそのままログインしてください。Google Cloudに登録していない場合は、このタイミングで何かしらのセットアップを行い、プロジェクトの作成まで完了させてください。

ログイン後、「APIs & Services」のページに到着します。左タブのOAuth consent screenをクリックし、Externalを選択してCREATEします。

設定画面で、App nameとUser support emailを入力します。App domainは今回は空欄で構いません。

画面下のAuthorized domainsには、amazoncognito.comと入力します。Developer contact informationには任意のメールアドレスを入力して下さい。SAVE AND CONTINUEをクリックします。

Scopesには何も入力しなくてOKです。そのままSAVE AND CONTINUEをクリックします。

Test usersは、自分のGoogleアカウントを使いたくない場合に設定すると良いでしょう。今回は既存アカウントで実施するため、そのままSAVE AND CONTINUEをクリック。最後の画面で設定内容を確認し、BACK TO DASHBOARDをクリックして確定させます。

次に、左のタブからCredentialsをクリックし、CREATE CREDENTIALSからOAuth client IDをクリックします。

Create OAuth client IDの画面で、Application typeのプルダウンでWeb applicationを選択すると各種設定項目が表示されます。Authorized JavaScript originsで、先ほど作成したCognitoユーザープールのドメインを追加しましょう。

Authorized redirect URIsにも同じURLを入力しますが、末尾に/oauth2/idpresponseと追記します。今回のドメイン名は、https://test-idp-haruta.auth.ap-northeast-1.amazoncognito.comなので、リダイレクトURIはhttps://test-idp-haruta.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponseとなります。CREATEをクリックして確定させましょう。

ポップアップが表示されると思うので、DOWNLOAD JSONをクリックしてシークレット情報を保存しておきます。

Google側の設定はこれで完了です。Cognitoに戻りましょう。

Cognitoで外部IDプロバイダを設定する

最後の設定の流れは以下の通りです。

1. ユーザープールのIDプロバイダにGoogleを設定する
2. 属性情報のマッピングを行う
3. アプリクライアントにGoogleを設定する

再びユーザープールの画面に行き、左のメニューからIDプロバイダーを選択すると、Cognitoが対応している外部フェデレーテッドIDプロバイダの一覧が表示されます。Googleをクリックすると、認証情報の入力画面が表示されます。JSONのシークレット情報から、Google app IDに対してclient_id、アプリシークレットに対してclient_secretをコピペします。承認スコープにはprofile email openidと入力してください。Googleの有効化をクリックして確定させます。

次に、属性マッピングでGoogleの属性情報とCognitoの属性情報を紐付けしていきます。今回はEmailだけマッピングしておきます。

保存後、左メニューのアプリクライアントの設定のページに行きます。有効なIDプロバイダにGoogleが追加されていると思うので、チェックマークを入れて変更を保存します。

ホストされたUIを起動をクリックすると、先ほどのサインイン画面にGoogle認証が追加されました。

クリックすると、Googleお馴染みの認証画面に飛びます。ログインが完了すると無事Exampleの画面にランディングできました。

ユーザープール側にもユーザー情報が登録されてました。問題なく機能してますね。

最後に

思ってたり設定の手数が多くてびっくりしました。どなたかの参考になれば幸いです。